<template>
  <div>
    <div v-if="pageBool">
      <div class="flex_between">
        <div>
          <el-button type="primary" @click="pageBool = false">
            打卡设置
          </el-button>
        </div>
        <el-button @click="$emit('send')">返回</el-button>
      </div>
      <div>
        <!-- 筛选输入，选择 -->
        <div class="grid_4_column" style="margin: 10px 0">
          <div>
            孩子姓名：
            <el-input
              v-model="form.cus_name"
              clearable
              maxlength="50"
              placeholder="输入孩子姓名"
              style="width: 200px"
              type="text"
            />
          </div>
          <div>
            手机号：
            <el-input
              v-model="form.tel"
              clearable
              maxlength="50"
              placeholder="请输入手机号"
              style="width: 200px"
              type="text"
            />
          </div>
          <div>
            打卡类型：
            <el-select
              v-model="form.menu_code"
              clearable
              placeholder="请选择打卡类型"
              @focus="getGrowth"
            >
              <el-option
                v-for="(item, index) of punchBtn"
                :key="index"
                :label="item.menu_name"
                :value="item.menu_code"
              />
            </el-select>
          </div>
        </div>
        <!-- 筛选，导出按钮 -->
        <div>
          <el-button
            icon="el-icon-search"
            :loading="filterLoad"
            type="primary"
            @click="getList('filterLoad')"
          >
            筛选
          </el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        :empty-text="emptyText"
        style="margin-top: 10px"
      >
        <el-table-column label="打卡类型" prop="menu_name" />
        <el-table-column label="家长" prop="customer_name" />
        <el-table-column label="孩子" prop="member_name" />
        <el-table-column label="生日" prop="reg_date" />
        <el-table-column label="打卡记录" width="500">
          <template slot-scope="scope">
            <!-- <el-tag type="primary">{{ lang[scope.row.reg_json.type] }}</el-tag> -->
            <!-- 打卡时间：{{scope.row.date}} -->
            <span v-for="(item, key) in scope.row.reg_array" :key="key">
              {{ key }}: {{ item }},
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="getPunchList(scope.row.member_id)"
            >
              查看全部打卡
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="form.page"
        layout="prev, pager, next"
        :total="tableTotal"
        @current-change="handleCurrentChange"
      />
    </div>
    <PunchList v-else @send="pageBool = true" />

    <el-dialog title="全部打卡信息" :visible.sync="dialog" width="70%">
      <el-table border :data="punchData" style="margin-top: 15px">
        <el-table-column label="打卡类型" prop="menu_name" />
        <el-table-column label="打卡信息">
          <template slot-scope="scope">
            <span v-for="(item, key) in scope.row.reg_array" :key="key">
              {{ key }}: {{ item }}{{ key == '年龄' ? '岁' : '' }},
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="punchForm.page"
        layout="prev, pager, next"
        :total="punchTotal"
        @current-change="handleCurrentChange"
      />
      <div slot="footer">
        <el-button type="danger" @click="dialog = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getGrowthMenu, getGrowthList } from '@/api/punch'

  export default {
    components: {
      PunchList: () => import('@/views/punch/punchlist.vue'),
    },
    data() {
      return {
        lang: window.localStorage.getItem('lang'), // 获取缓存中的数据字典数据
        pageBool: true,
        punchBtn: [], // 存放打卡按钮列表
        form: {
          cus_name: '',
          tel: '',
          menu_code: '',
          page: 1,
          pagesize: 10,
        },
        filterLoad: false,
        emptyText: ' ',
        tableData: [],
        tableTotal: 10,
        dialog: false, // 打卡信息对话框
        punchForm: {
          member_id: '',
          page: 1,
          pagesize: 10,
        },
        punchData: [],
        punchTotal: 10,
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      // 获取成长打卡按钮
      getGrowth() {
        if (this.punchBtn.length == 0) {
          getGrowthMenu().then((res) => {
            if (res.code == 200) {
              this.punchBtn = res.data.data
            } else {
              this.$message.error(res.message)
              this.emptyText = '暂无数据'
            }
          })
        }
      },
      // 获取客户端用户的宝宝列表
      getList(btnLoad) {
        this[btnLoad] = true
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        getGrowthList(this.form).then((e) => {
          this.tableData = e.data.data
          this.tableTotal = e.data.last_page * 10
          this[btnLoad] = false
          loading.close()
          this.emptyText = '暂无数据'
        })
      },
      getPunchList(member_id) {
        this.punchForm.member_id = member_id
        getGrowthList(this.punchForm).then((res) => {
          this.punchData = res.data.data
          this.punchTotal = res.data.last_page * 10
          this.dialog = true
        })
      },
      // 下一页
      handleCurrentChange(val) {
        this.form.page = val
        this.getList()
      },
    },
  }
</script>

<style scoped>
  .grid_4_column {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }
  .box > div {
    margin-bottom: 10px;
  }
  .title_txt {
    width: 40%;
    text-align: right;
  }
</style>
